<template>
	<view class="container">
		<view class="content">
			<!-- 搜索栏 -->
			<view class="search-section">
				<view class="search-box">
					<image src="/static/search.png" class="search-icon" />
					<input
						class="search-input"
						v-model="searchKeyword"
						placeholder="搜索知识文章..."
						confirm-type="search"
						@confirm="handleSearch"
						@input="onSearchInput"
					/>
					<view v-if="searchKeyword" class="clear-btn" @click="clearSearch">
						<text class="clear-text">×</text>
					</view>
				</view>
			</view>

			<!-- 分类标签 -->
			<view class="category-section">
				<scroll-view class="category-scroll" scroll-x="true">
					<view class="category-list">
						<view
							class="category-item"
							:class="{ active: currentCategory === item.id }"
							v-for="item in categories"
							:key="item.id"
							@click="selectCategory(item.id)"
						>
							<text class="category-text">{{ item.name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 热门推荐 -->
			<view v-if="!searchKeyword && currentCategory === 'all'" class="hot-section">
				<view class="section-header">
					<text class="section-title">热门推荐</text>
					<text class="section-more" @click="goToMore('hot')">更多</text>
				</view>
				<view class="hot-list">
					<view
						class="hot-item"
						v-for="item in hotArticles"
						:key="item.id"
						@click="goToDetail(item)"
					>
						<image :src="item.cover" class="hot-cover" mode="aspectFill" />
						<view class="hot-info">
							<text class="hot-title">{{ item.title }}</text>
							<text class="hot-desc">{{ item.description }}</text>
							<view class="hot-meta">
								<text class="hot-views">{{ item.views }}次阅读</text>
								<text class="hot-date">{{ item.date }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 文章列表 -->
			<view class="article-section">
				<view class="section-header">
					<text class="section-title">{{ getSectionTitle() }}</text>
					<text v-if="filteredArticles.length > 0" class="article-count">{{ filteredArticles.length }}篇</text>
				</view>
				
				<view v-if="loading" class="loading-section">
					<text class="loading-text">加载中...</text>
				</view>
				
				<view v-else-if="filteredArticles.length === 0" class="empty-section">
					<image src="/static/placeholder.png" class="empty-icon" />
					<text class="empty-text">{{ searchKeyword ? '未找到相关文章' : '暂无文章' }}</text>
				</view>
				
				<view v-else class="article-list">
					<view
						class="article-item"
						v-for="item in filteredArticles"
						:key="item.id"
						@click="goToDetail(item)"
					>
						<view class="article-content">
							<view class="article-header">
								<text class="article-title">{{ item.title }}</text>
								<view class="article-tag" v-if="item.tag">
									<text class="tag-text">{{ item.tag }}</text>
								</view>
							</view>
							<text class="article-desc">{{ item.description }}</text>
							<view class="article-meta">
								<view class="meta-left">
									<text class="article-author">{{ item.author }}</text>
									<text class="article-date">{{ item.date }}</text>
								</view>
								<view class="meta-right">
									<view class="meta-item">
										<image src="/static/star.png" class="meta-icon" />
										<text class="meta-text">{{ item.likes }}</text>
									</view>
									<view class="meta-item">
										<image src="/static/search-2.png" class="meta-icon" />
										<text class="meta-text">{{ item.views }}</text>
									</view>
								</view>
							</view>
						</view>
						<image v-if="item.cover" :src="item.cover" class="article-cover" mode="aspectFill" />
					</view>
				</view>

				<!-- 加载更多 -->
				<view v-if="hasMore && filteredArticles.length > 0" class="load-more" @click="loadMore">
					<text class="load-more-text">{{ loadingMore ? '加载中...' : '加载更多' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

// 响应式数据
const searchKeyword = ref('');
const currentCategory = ref('all');
const loading = ref(false);
const loadingMore = ref(false);
const hasMore = ref(true);
const page = ref(1);
const pageSize = ref(10);

// 分类数据
const categories = ref([
	{ id: 'all', name: '全部' },
	{ id: 'maintenance', name: '设备维护' },
	{ id: 'repair', name: '故障维修' },
	{ id: 'safety', name: '安全规范' },
	{ id: 'operation', name: '操作指南' },
	{ id: 'emergency', name: '应急处理' },
	{ id: 'u', name: '工具使用' },
	{ id: 'standards', name: '标准规范' }
]);

// 热门文章数据
const hotArticles = ref([
	{
		id: 1,
		title: '空调系统日常维护指南',
		description: '详细介绍空调系统的日常检查、清洁和维护方法，确保设备正常运行。',
		cover: '/static/air-conditioning.png',
		views: 1250,
		date: '2024-01-15'
	},
	{
		id: 2,
		title: '电梯故障应急处理流程',
		description: '电梯故障时的标准应急处理流程，保障乘客安全和设备稳定。',
		cover: '/static/elevator.png',
		views: 980,
		date: '2024-01-12'
	},
	{
		id: 3,
		title: '水管维修技术要点',
		description: '水管维修的常见问题及解决方案，包括工具使用和操作技巧。',
		cover: '/static/waterpipe.png',
		views: 756,
		date: '2024-01-10'
	}
]);

// 文章列表数据
const articles = ref([
	{
		id: 1,
		title: '空调系统日常维护指南',
		description: '详细介绍空调系统的日常检查、清洁和维护方法，确保设备正常运行。',
		cover: '/static/air-conditioning.png',
		author: '张工程师',
		date: '2024-01-15',
		views: 1250,
		likes: 45,
		tag: '维护',
		category: 'maintenance'
	},
	{
		id: 2,
		title: '电梯故障应急处理流程',
		description: '电梯故障时的标准应急处理流程，保障乘客安全和设备稳定。',
		cover: '/static/elevator.png',
		author: '李师傅',
		date: '2024-01-12',
		views: 980,
		likes: 32,
		tag: '应急',
		category: 'emergency'
	},
	{
		id: 3,
		title: '水管维修技术要点',
		description: '水管维修的常见问题及解决方案，包括工具使用和操作技巧。',
		cover: '/static/waterpipe.png',
		author: '王师傅',
		date: '2024-01-10',
		views: 756,
		likes: 28,
		tag: '维修',
		category: 'repair'
	},
	{
		id: 4,
		title: '电气设备安全检查标准',
		description: '电气设备安全检查的标准流程和注意事项，确保用电安全。',
		cover: '/static/elevator.png',
		author: '陈工程师',
		date: '2024-01-08',
		views: 632,
		likes: 25,
		tag: '安全',
		category: 'safety'
	},
	{
		id: 5,
		title: '常用维修工具使用方法',
		description: '介绍维修工作中常用工具的正确使用方法和注意事项。',
		cover: '/static/waterpipe.png',
		author: '刘师傅',
		date: '2024-01-05',
		views: 589,
		likes: 22,
		tag: '工具',
		category: 'tools'
	}
]);

// 计算属性
const filteredArticles = computed(() => {
	let filtered = articles.value;
	
	// 按分类筛选
	if (currentCategory.value !== 'all') {
		filtered = filtered.filter(item => item.category === currentCategory.value);
	}
	
	// 按关键词搜索
	if (searchKeyword.value) {
		const keyword = searchKeyword.value.toLowerCase();
		filtered = filtered.filter(item => 
			item.title.toLowerCase().includes(keyword) ||
			item.description.toLowerCase().includes(keyword) ||
			item.author.toLowerCase().includes(keyword)
		);
	}
	
	return filtered;
});

const handleSearch = () => {
	// 执行搜索
	console.log('搜索关键词:', searchKeyword.value);
	// 这里可以调用API进行搜索
};

const onSearchInput = () => {
	// 实时搜索（可选）
	// 可以在这里实现防抖搜索
};

const clearSearch = () => {
	searchKeyword.value = '';
};

const selectCategory = (categoryId) => {
	currentCategory.value = categoryId;
	page.value = 1;
	hasMore.value = true;
	loadArticles();
};

const getSectionTitle = () => {
	if (searchKeyword.value) {
		return `搜索结果`;
	}
	if (currentCategory.value === 'all') {
		return '全部文章';
	}
	const category = categories.value.find(item => item.id === currentCategory.value);
	return category ? category.name : '文章';
};

const loadArticles = () => {
	loading.value = true;
	
	// 模拟API调用
	setTimeout(() => {
		// 这里应该调用实际的API
		loading.value = false;
	}, 1000);
};

const loadMore = () => {
	if (loadingMore.value || !hasMore.value) return;
	
	loadingMore.value = true;
	page.value++;
	
	// 模拟加载更多
	setTimeout(() => {
		// 这里应该调用实际的API加载更多数据
		loadingMore.value = false;
		
		// 模拟没有更多数据
		if (page.value > 3) {
			hasMore.value = false;
		}
	}, 1000);
};

const goToDetail = (article) => {
	uni.navigateTo({
		url: `/pages/index/knowledge/detail/detail?id=${article.id}`
	});
};

const goToMore = (type) => {
	uni.navigateTo({
		url: `/pages/index/knowledge/more/more?type=${type}`
	});
};

// 生命周期
onMounted(() => {
	loadArticles();
});
</script>

<style scoped>
.container {
	background-color: #EFEFEF;
	min-height: 1200rpx;
	padding: 30rpx 0 240rpx 0;
}

.content {
	padding: 0 30rpx;
}

/* 搜索栏 */
.search-section {
	margin-bottom: 30rpx;
}

.search-box {
	background: #fff;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.search-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.clear-btn {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
	border-radius: 50%;
}

.clear-text {
	font-size: 24rpx;
	color: #999;
}

/* 分类标签 */
.category-section {
	margin-bottom: 30rpx;
}

.category-scroll {
	white-space: nowrap;
}

.category-list {
	display: flex;
	gap: 20rpx;
	padding: 10rpx 0;
}

.category-item {
	padding: 15rpx 30rpx;
	background: #fff;
	border-radius: 50rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	white-space: nowrap;
}

.category-item.active {
	background: #3D76FF;
}

.category-text {
	font-size: 26rpx;
	color: #333;
}

.category-item.active .category-text {
	color: #fff;
}

/* 热门推荐 */
.hot-section {
	margin-bottom: 30rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.section-more {
	font-size: 26rpx;
	color: #3D76FF;
}

.hot-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.hot-item {
	background: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
	display: flex;
	gap: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.hot-cover {
	width: 120rpx;
	height: 120rpx;
	border-radius: 10rpx;
	flex-shrink: 0;
}

.hot-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hot-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hot-desc {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 15rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hot-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hot-views, .hot-date {
	font-size: 22rpx;
	color: #999;
}

/* 文章列表 */
.article-section {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.article-count {
	font-size: 24rpx;
	color: #999;
}

.loading-section, .empty-section {
	text-align: center;
	padding: 60rpx 0;
}

.loading-text, .empty-text {
	font-size: 28rpx;
	color: #999;
}

.empty-icon {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 20rpx;
	opacity: 0.5;
}

.article-list {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.article-item {
	display: flex;
	gap: 20rpx;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.article-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.article-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.article-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 10rpx;
}

.article-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	flex: 1;
	margin-right: 15rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-tag {
	padding: 4rpx 12rpx;
	background: #E8F3FF;
	border-radius: 10rpx;
	flex-shrink: 0;
}

.tag-text {
	font-size: 20rpx;
	color: #3D76FF;
}

.article-desc {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 15rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.meta-left {
	display: flex;
	gap: 20rpx;
}

.article-author, .article-date {
	font-size: 22rpx;
	color: #999;
}

.meta-right {
	display: flex;
	gap: 20rpx;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.meta-icon {
	width: 24rpx;
	height: 24rpx;
}

.meta-text {
	font-size: 22rpx;
	color: #999;
}

.article-cover {
	width: 120rpx;
	height: 120rpx;
	border-radius: 10rpx;
	flex-shrink: 0;
}

/* 加载更多 */
.load-more {
	text-align: center;
	padding: 30rpx 0;
}

.load-more-text {
	font-size: 28rpx;
	color: #3D76FF;
}
</style> 